<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid red;

            /* 
            锥形渐变
            1.简单的锥形渐变，指定渐变的颜色
            2，设置渐变旋转的角度
            3. 设置渐变的中心点，默认在元素的中心
            4. 设置颜色的起始位置（角度值）
            5.设置多个色标
            6. 可以自定义两个颜色的过度中心（转换中心）
            */
            background-image: conic-gradient(
                red,yellow,blue
            );
            background-image: conic-gradient(
                from 45deg, red,yellow,blue
            );
            background-image: conic-gradient(
                from 45deg at 50px 50px, red,yellow,blue
            );
            background-image: conic-gradient(
                red 90deg,
                yellow 50% 75%,
                blue 90%
            );
            background-image: conic-gradient(
                red 90deg,
                yellow 50%,
                85%,
                blue 90%
            );

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>